<template>

    <div>
        <div>
        <el-input v-model="house.ownerNickname" placeholder="请输入昵称" style="width: 15%"></el-input>
        <el-input v-model="house.ownerRealName" placeholder="请输入真实姓名" style="width:15%"></el-input>
        <el-input v-model="house.ownerIdCard" placeholder="请输入身份证码" style="width: 15%"></el-input>
        <el-input v-model="house.ownerPhoneNumber" placeholder="请输入手机号码" style="width: 15%"></el-input>
        <el-button type="primary" @click="showowner">搜索</el-button>
        <el-button type="primary" @click="reflesh">重置</el-button>
    </div>

        <el-dialog title="解绑" :visible.sync="dialogFormVisible">
            <el-form :model="unitform">

                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="unitform.ownerNickname" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" :label-width="formLabelWidth">
                    <el-input v-model="unitform.ownerRealName" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="unitform.ownerGender" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="unitform.ownerAge" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="unitform.ownerIdCard" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="手机号码" :label-width="formLabelWidth">
                    <el-input v-model="unitform.ownerPhoneNumber" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="小区名称" :label-width="formLabelWidth">
                    <el-input v-model="unitform.communityName" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼栋名称" :label-width="formLabelWidth">
                    <el-input v-model="unitform.buildingName" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单元名称" :label-width="formLabelWidth">
                    <el-input v-model="unitform.unitName" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房间名称" :label-width="formLabelWidth">
                    <el-input v-model="unitform.roomName" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" :label-width="formLabelWidth">
                    <el-input v-model="unitform.ownerBirthday" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="房屋状态" :label-width="formLabelWidth">
                    <el-select v-model="unitform.zyOwnerRoom.roomStatus" placeholder="请选择" style="width: 180px;">
                        <el-option
                                v-for="item in option"
                                :label="item.label"
                                :value="item.value">
                        </el-option>

                    </el-select>
                </el-form-item>
            </el-form>


            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="tutu">确 定</el-button>
            </div>
        </el-dialog>

        <el-table
                :data="zyowners"
                style="width: 100%;text-align: center"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>

            <el-table-column
                    label="序号"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{scope.row.ownerId}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="昵称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerNickname }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="真实姓名"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerRealName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="性别"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerGender }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="年龄"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerAge }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="身份证号"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerIdCard }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="手机号码"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerPhoneNumber }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="小区名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyCommunity.communityName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="楼栋名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyBuilding.buildingName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="单元名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyUnit.unitName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="房间名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyRoom.roomName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="出生日期"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerBirthday }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="业主类型"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.ownerType }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="房屋状态"
                    width="100px">
                <template slot-scope="scope">
                    <span v-if="scope.row.zyOwnerRoom.roomStatus=='Binding'">已绑定</span>
                    <span v-if="scope.row.zyOwnerRoom.roomStatus=='Auditing'">未绑定</span>
                </template>
            </el-table-column>

            <el-table-column label="操作"
                             width="200px">
                <template slot-scope="scope">
                    <el-link icon="el-icon-close" @click="huixian(scope.row)">解绑</el-link>
                </template>


            </el-table-column>


        </el-table>


        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[1, 2, 6, 8]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Owner",
        data() {
            return {
                option: [{
                    value: 'Binding',
                    label: '已绑定'
                }, {
                    value: 'Auditing',
                    label: '未绑定'
                }],
                dialogFormVisible: false,
                zyowners: [],
                total: 0,
                current: 1,
                size: 1,
                formLabelWidth: "200px",
                unitform: {
                    ownerId: "",
                    ownerNickname: "",
                    ownerRealName: "",
                    ownerGender: "",
                    ownerAge: "",
                    ownerIdCard: "",
                    ownerPhoneNumber: "",
                    communityId: "",
                    communityName: "",
                    buildingName: "",
                    buildingId: "",
                    unitId: "",
                    unitName: "",
                    roomId: "",
                    roomName: "",
                    ownerType: "",
                    ownerBirthday: "",
                    ownerRoomId: "",
                    zyOwnerRoom: {
                        roomStatus: ""
                    }


                },


                house: {
                    ownerNickname: "",
                    ownerRealName: "",
                    ownerIdCard: "",
                    ownerPhoneNumber: ""

                },
            }
        },
        methods: {
            handleSizeChange(val) {
                this.size = val;
                this.showowner(this.current, this.size);

            },
            handleCurrentChange(val) {
                this.current = val;
                this.showowner(this.current, this.size);
            },
            showowner(current, size) {
                this.current = 1;
                if (current > 1) {
                    this.current = current;
                    this.size = size;
                }

                this.axios.get("http://localhost:8080/zyowner/page/fuzzy?current=" + this.current + "&size=" + this.size + "&ownerNickname=" + this.house.ownerNickname + "&ownerRealName=" + this.house.ownerRealName + "&ownerIdCard=" + this.house.ownerIdCard + "&ownerPhoneNumber=" + this.house.ownerPhoneNumber)
                    .then(res => {
                        console.log(res)
                        this.zyowners = res.data.data.records;
                        this.current = res.data.data.current;
                        this.size = res.data.data.size;
                        this.total = res.data.data.total;
                    })
            },
            huixian(row) {
                console.log(row);
                this.dialogFormVisible = true;
                this.unitform.ownerId = row.ownerId;
                this.unitform.communityId = row.communityId;
                this.unitform.buildingId = row.buildingId;
                this.unitform.unitId = row.unitId;
                this.unitform.roomId = row.roomId;
                this.unitform.ownerNickname = row.ownerNickname;
                this.unitform.ownerRealName = row.ownerRealName;
                this.unitform.ownerGender = row.ownerGender;
                this.unitform.ownerAge = row.ownerAge;
                this.unitform.ownerIdCard = row.ownerIdCard;
                this.unitform.ownerPhoneNumber = row.ownerPhoneNumber;
                this.unitform.communityName = row.zyCommunity.communityName;
                this.unitform.buildingName = row.zyBuilding.buildingName;
                this.unitform.unitName = row.zyUnit.unitName;
                this.unitform.roomName = row.zyRoom.roomName;
                this.unitform.ownerBirthday = row.ownerBirthday;
                this.unitform.zyOwnerRoom.roomStatus = row.zyOwnerRoom.roomStatus;
                this.unitform.ownerRoomId = row.zyOwnerRoom.ownerRoomId;


            },
            tutu() {
                this.axios.put("http://localhost:8080/zyowner/update", this.unitform)
                    .then(res => {
                        if (res.data.status == "OK") {
                            this.$message({
                                message: '解绑成功！',
                                type: 'success'
                            });
                        }
                    });
                this.dialogFormVisible = false;
                this.showowner(this.current, this.size);

            },
            reflesh() {
                this.house.ownerNickname = "";
                this.house.ownerRealName = "";
                this.house.ownerIdCard = "";
                this.house.ownerPhoneNumber = "";
                this.showowner(this.current, this.size);


            }


        },
        created() {
            this.showowner(this.current, this.size);


        }
    }
</script>

<style scoped>

</style>